<template>
	<div class="circleProgressBox">
		<div class="circleProgress">
			<el-progress type="circle" :percentage="percentage" class="overdue" :stroke-width="strokeWidth" :width="width" :show-text="showText"></el-progress>
			<div class="text font-14 text-gray abso text-center">
				{{title}}<br><span class="font-26 text-black block">{{number}}</span>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			title: {
				type: String,
				default: ''
			},
			percentage: {
				type: Number,
				default: 0
			},
			number: {
				type: Number,
				default: 0
			},
			showText: {
				type: Boolean,
				default: false
			},
			strokeWidth: {
				type: Number,
				default: 0
			},
			width: {
				type: Number,
				default: 0
			}
		}
	}
</script>

<style lang="less" scoped>
	.circleProgress{
		.text{
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			span{
				margin-top: 5px;
			}
		}
	}
</style>
